<!-- 信誉值 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="信誉值" :borderBottom="false" :background="background" title-color="#FFFFFF"
		 back-icon-color="#FFFFFF"></u-navbar>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="wrap">
			<navigator hover-class="none" url="aboutReputation" class="statement">信誉值说明</navigator>
			<view class="score"><text>{{reputation}}</text>分</view>
			<view class="current">当前信誉值</view>
			<view class="white"></view>
		</view>
		<view class="list">
			<view class="title">变更记录</view>
			<view class="item" v-for="(item,index) in list">
				<view class="flex_bet_align">
					<view class="msg">{{item.title}}</view>
					<view class="opera">{{item.status==1?'+':'-'}}{{item.credit_value}}分</view>
				</view>
				<view class="time flex_bet_align">
					<view>{{item.createtime}}</view>
					<view>信誉值：{{item.getmember.credit_value}}分</view>
				</view>
			</view>
		</view>
		<view class="not_more" v-if="list.length<1">
			<image src="../static/img/wxiaoxi.png" mode="widthFix"></image>
			<view class="text">暂无消息</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#38BE8C',
				},
				reputation:0,
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
			}
		},
		onLoad(options) {
			_this = this
			_this.reputation=options.reputation
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData('creditchange', {}, (data) => {
					if (firstLoad) {
						_this.list = data.list ? data.list : []
					} else {
						_this.list = _this.list.concat(data.list)
					}
					_this.nomore = data.nomore
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F2F2;
	}

	.wrap {
		background-color: #38BE8C;
		width:750rpx;
		height: 360rpx;
		position: relative;
		.statement {
			padding-right: 47rpx;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: right;
			color: #ffffff;
		}
		.score{
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			line-height: 90rpx;
			color: #ffffff;
			text{
				font-size: 94rpx;
			}
		}
		.current{
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: center;
			color: #86eac5;
		}
		.white{
			height: 56rpx;
			width: 695rpx;
			position: absolute;
			bottom: 0;
			left:28rpx;
			background-color: #FFFFFF;
			border-radius:20rpx 20rpx 0 0;
		}
	}
	.list{
		width: 695rpx;
		margin:0 auto;
		background: #ffffff;
		padding:0 42rpx 78rpx;
		border-radius: 0 0 20rpx 20rpx;
		.title{
			font-size: 30rpx;
			line-height: 50rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #000000;
		}
		.item{
			padding:46rpx 0 48rpx;
			border-bottom: 1rpx solid #E6E6E6;
			.msg{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #000000;
			}
			.opera{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #38be8c;
			}
			.time{
				margin-top:30rpx;
				font-size: 22rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #999999;
			}
		}
	}
</style>
